<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="./components/styles/fonts.css" />
    <link rel="stylesheet" href="./components/styles/footer.css" />
    <link rel="stylesheet" href="./components/styles/theme.css" />
    <link rel="stylesheet" href="./components/styles/modal.css" />
    <link rel="stylesheet" href="./components/styles/scrollButton.css" />
    <link rel="stylesheet" href="./components/styles/header.css" />
    <link rel="stylesheet" href="./components/styles/main.css" />
    <link rel="stylesheet" href="./components/styles/reset.css" />
    <link rel="stylesheet" href="./components/styles/style.css" />

    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <header class="header">
        <div class="container">
          <div class="header-container">
            <div class="logo">KOSTEEV</div>

            <div class="header__link">
              <a href="#phone">Телефоны</a>
            </div>
            <div class="header__link">
              <a href="#watch">Смарт-Часы</a>
            </div>
            <div class="header__link">
              <a href="#headphones">Наушники</a>
            </div>
            <label class="toggle-switch">
              <input type="checkbox" />
              <span class="slider"></span>
            </label>
          </div>
        </div>
      </header>

      <main>
        <div id="phone" style="margin-top: 150px" class="phone-container">
          <div class="title">Телефоны</div>
          <div class="product-cards product-container"></div>
        </div>
        <div id="watch" class="watch-container">
          <div class="title">Смарт-Часы</div>
          <div class="product-cards product-container"></div>
        </div>
        <div id="headphones" class="headphones-container">
          <div class="title">Наушники</div>
          <div class="product-cards product-container"></div>
        </div>
      </main>

      <button class="btn-scroll-top show" aria-label="Наверх">
        <svg
          version="1.1"
          id="Capa_1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          x="0px"
          y="0px"
          width="612px"
          height="612px"
          viewBox="0 0 612 612"
          style="enable-background: new 0 0 612 612"
          xml:space="preserve"
        >
          <g id="_x32__2_">
            <path
              d="M306,0C136.992,0,0,136.992,0,306s136.992,306,306,306s306-137.012,306-306S475.008,0,306,0z M306,573.75
				C158.125,573.75,38.25,453.875,38.25,306C38.25,158.125,158.125,38.25,306,38.25c147.875,0,267.75,119.875,267.75,267.75
				C573.75,453.875,453.875,573.75,306,573.75z M322.811,219.249c-4.59-4.59-10.862-6.005-16.811-4.973
				c-5.929-1.052-12.221,0.383-16.811,4.973l-146.44,146.44c-7.478,7.478-7.478,19.584,0,27.042c7.478,7.479,19.584,7.479,27.043,0
				L306,256.543l136.189,136.188c7.478,7.479,19.584,7.479,27.042,0c7.479-7.478,7.479-19.584,0-27.042L322.811,219.249z"
            ></path>
          </g>
        </svg>
      </button>

      <div class="modal">
        <div class="modal-content">
          <div class="modal__block">
            <div class="modal-product-image"></div>
            <div class="modal__block__content">
              <div class="modal__block__content__title">
                <span class="modal-product-name"></span>
              </div>
              <form>
                <div class="modal__product__quantity">
                  <label for="quantity-input">Количество</label>
                </div>
                <div class="quantity__block">
                  <button id="decrease-btn">-</button>
                  <input
                    type="number"
                    id="quantity-input"
                    value="1"
                    type="number"
                    name="quantity"
                    min="1"
                    required
                  />
                  <button id="increase-btn">+</button>
                </div>
                <fieldset>
                  <div class="modal__color__title">
                    <legend>Цвет:</legend>
                  </div>
                  <div class="modal__color__toggle">
                    <label for="color-black">
                      <input
                        type="radio"
                        id="color-black"
                        name="color"
                        value="черного"
                        required
                      />
                      <span class="color__button black__color"></span>
                    </label>

                    <label for="color-white">
                      <input type="radio" id="color-white" name="color" value="белого" />
                      <span class="color__button white__color"></span>
                    </label>

                    <label for="color-blue">
                      <input type="radio" id="color-blue" name="color" value="синего" />
                      <span class="color__button blue__color"></span>
                    </label>
                    <label for="color-green">
                      <input
                        type="radio"
                        id="color-green"
                        name="color"
                        value="зеленого"
                      />
                      <span class="color__button green__color"></span>
                    </label>
                  </div>
                </fieldset>

                <div class="modal__comment__title">
                  <label for="comment-input">Комментарий:</label>
                </div>
                <div class="modal__comment">
                  <textarea
                    id="comment-input"
                    name="comment"
                    rows="4"
                    maxlength="2000"
                    placeholder="Количество символов не должно превышать более 2000 символов"
                  ></textarea>
                </div>

                <button type="submit">Купить</button>

                <button type="button" class="close-modal">Закрыть</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer class="footer">
      <div class="footer__container">
        <div class="logo">KOSTEEV</div>
        <div class="catalog">
          <div class="catalog__title">Категории</div>
          <div class="catalog__text">
            <div class="catalog__link">
              <a href="#phone">Телефоны</a>
            </div>
            <div class="catalog__link">
              <a href="#watch">Смарт-Часы</a>
            </div>
            <div class="catalog__link">
              <a href="#headphones">Наушники</a>
            </div>
            <div class="telegram">
              <a href="https://t.me/ivan_valcapital"
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 48 48"
                  width="48px"
                  height="48px"
                >
                  <path class="tele_1" d="M24 4A20 20 0 1 0 24 44A20 20 0 1 0 24 4Z" />
                  <path
                    fill="#fff"
                    d="M33.95,15l-3.746,19.126c0,0-0.161,0.874-1.245,0.874c-0.576,0-0.873-0.274-0.873-0.274l-8.114-6.733 l-3.97-2.001l-5.095-1.355c0,0-0.907-0.262-0.907-1.012c0-0.625,0.933-0.923,0.933-0.923l21.316-8.468 c-0.001-0.001,0.651-0.235,1.126-0.234C33.667,14,34,14.125,34,14.5C34,14.75,33.95,15,33.95,15z"
                  />
                  <path
                    fill="#b0bec5"
                    d="M23,30.505l-3.426,3.374c0,0-0.149,0.115-0.348,0.12c-0.069,0.002-0.143-0.009-0.219-0.043 l0.964-5.965L23,30.505z"
                  />
                  <path
                    fill="#cfd8dc"
                    d="M29.897,18.196c-0.169-0.22-0.481-0.26-0.701-0.093L16,26c0,0,2.106,5.892,2.427,6.912 c0.322,1.021,0.58,1.045,0.58,1.045l0.964-5.965l9.832-9.096C30.023,18.729,30.064,18.416,29.897,18.196z"
                  />
                </svg>
                Telegram</a
              >
            </div>
          </div>
        </div>
      </div>
    </footer>
  </body>

  <script src="./components/db/products.js"></script>
  <script src="./components/functions/getDate.js"></script>
  <script src="./index.js"></script>
</html>
